<template>
  <el-select
    v-model="selectDest"
    placeholder="请选择地区"
    style="width: 115px"
    @change="innerDestChange"
  >
    <el-option
      v-for="(option, oIndex) in destOptions"
      :label="option.label"
      :value="option.value"
      :key="oIndex"
    />
  </el-select>
</template>
<script setup lang="ts">
import { useUserStoreHook } from "@/store/modules/user";
import { ref, onBeforeMount, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
export interface destSelectType {
  userSelectedRegions;
}

const router = useRouter();

const emits = defineEmits(["destChange"]);
const userStore = useUserStoreHook();

const localSelectDestKey = userStore.userInfo.user + "localSelectDestKey";

const userRegions = userStore.userRegions;

const userRegionsList = userRegions.list.sort((preItem, curItem) => {
  return preItem.type - curItem.type;
});

const destOptions = ref(
  userRegionsList.map(item => {
    const tempObj = { label: "", value: "" };
    if (item.type === 2) {
      tempObj.label = item.provinceName;
      tempObj.value = item.provinceId;
    } else if (item.type === 3) {
      tempObj.label = item.cityName;
      tempObj.value = item.cityId;
    } else {
      tempObj.label = item.areaName;
      tempObj.value = item.areaId;
    }
    return tempObj;
  })
);

// 查询用户地区是否有城市，如果有城市

// 默认值：用户当前地区

// 获取上一次选择的值

const preSelectedDestValue = localStorage.getItem(localSelectDestKey);

const userSelectedRegions = ref({});
const selectDest = ref();
if (
  preSelectedDestValue &&
  preSelectedDestValue !== "undefined" &&
  preSelectedDestValue !== "null"
) {
  userSelectedRegions.value = userRegionsList.find(item => {
    return (
      item.provinceId === preSelectedDestValue ||
      item.cityId === preSelectedDestValue ||
      item.areaId === preSelectedDestValue
    );
  });
  selectDest.value = preSelectedDestValue;
}

// 如果没有匹配，则默认第一个为默认值
// console.log("userSelectedRegions.value:", userSelectedRegions.value);
// console.log("destOptions:", destOptions.value);

// console.log("userRegionsList:", userRegionsList);
if (
  !userSelectedRegions.value ||
  Object.keys(userSelectedRegions.value).length === 0
) {
  selectDest.value = destOptions.value[0] && destOptions.value[0].value;
  // console.log("selectDest.value:", selectDest.value);
  userSelectedRegions.value = userRegionsList.find(item => {
    return (
      item.provinceId === selectDest.value ||
      item.cityId === selectDest.value ||
      item.areaId === selectDest.value
    );
  });
}

// console.log('userSelectedRegions:',userSelectedRegions.value)

// 根据type进行排序，求出最高级，type越小级别越高
/** userRegionsList格式
 *  [{
    "id": null,
    "userId": "0f4c658c10534f0eaa7a79f8bd1b567a",
    "type": 3,
    "provinceId": "340000",
    "cityId": "340200",
    "areaId": null,
    "provinceName": "安徽省",
    "cityName": "芜湖市",
    "areaName": null,
    "createBy": null,
    "createDate": null,
    "updateBy": null,
    "updateDate": null,
    "remarks": null
}]
 */

//  console.log('userSelectedRegions:',userSelectedRegions.value)

function innerDestChange(val) {
  localStorage.setItem(localSelectDestKey, val);
  // console.log("userRegionsList:", userRegionsList);
  // console.log("destChange val:", val);
  // console.log("typeof destChange val:", typeof val);
  userSelectedRegions.value = userRegionsList.find(item => {
    return (
      item.provinceId === val || item.cityId === val || item.areaId === val
    );
  });
  // console.log("userSelectedRegions.value:", userSelectedRegions.value);
  emits("destChange", userSelectedRegions.value);
}

function setDestValue(val) {
  selectDest.value = val;
}

watch(
  () => userRegions,
  (data, preData) => {
    console.log("watch userRegions");
  }
);
onBeforeMount(() => {
  if (userRegions.list.length === 0) {
    ElMessage({
      message: "请先设置用户所在地区",
      type: "error"
    });
    router.push({ path: "/setting/user" });
  }
});
onMounted(() => {
  // console.log('mydest onMounted')
});

defineExpose({
  userSelectedRegions,
  setDestValue
});
</script>
<style lang="scss"></style>
